<template>
	<div>
		<tableTem ref="tableRef" v-bind:="state.tableData" @pageChange="onTablePageChange" @onSelectionChange="onSelectionChange">
			<el-table-column align="center" label="选择" type="index" width="60">
				<template #default="{ row }">
					<el-radio v-model="state.selectedRow" :label="row" />
				</template>
			</el-table-column>

			<el-table-column align="center" type="index" label="序号" width="60" />
			<el-table-column align="center" min-width="120" prop="name" label="名称"></el-table-column>
			<el-table-column align="center" min-width="120" prop="accountNumber" label="授权">
				<template #default="scope">
					<el-tag type="success">{{ scope.row.isAuthorization ? '已' : '未' }}授权</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="authorizationTypeNames" min-width="150" label="授权类型">
				<template #default="scope">
					<span>{{ parseJson(scope.row.authorizationTypeNames) }}</span>
				</template>
			</el-table-column>

			<el-table-column align="center" min-width="100" prop="status" label="预警状态">
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.status == 1">启用</el-tag>
					<el-tag type="info" v-else>冻结</el-tag>
				</template>
			</el-table-column>
		</tableTem>
		<div class="dialog-btn">
			<span class="mr10" v-if="state.selectedRow">已选择数据 {{ state.selectedRow['name'] }}</span>
			<el-button @click="onCancel" size="default">取 消</el-button>
			<el-button :disabled="!state.selectedRow" type="primary" @click="onSubmit" size="default">确 认</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { SubSystemGetPagedList } from '/@/api/subSystemInfo/index';
// 引入组件
const tableTem = defineAsyncComponent(() => import('/@/components/tables/index.vue'));

// 定义变量内容
const tableRef = ref();
// 定义子组件向父组件传值/事件
const emit = defineEmits(['closeSub', 'onSubmitSub']);
const state = reactive<any>({
	tableData: {
		data: [],
		total: 0,
		loading: true,
		param: {
			PageIndex: 1,
			PageSize: 10,
		},
		selectedRow: null,
	},
});
// 页面加载时
onMounted(() => {
	getTableData();
});

// 初始化表格数据
const getTableData = async () => {
	state.tableData.loading = true;
	try {
		const params = {
			...state.tableData.param,
		};
		Object.keys(params).forEach((key) => {
			if (!params[key]) delete params[key];
		});
		let data = await SubSystemGetPagedList(params);
		state.tableData.data = data.data.items;
		state.tableData.total = data.data.totalCount;
	} finally {
		state.tableData.loading = false;
	}
};
const parseJson = (v: any) => {
	if (!v) return;
	if (v.length) {
		return v.join(',');
	} else {
		return v;
	}
};

// 关闭弹窗
const onCancel = () => {
	emit('closeSub');
};
// 确认
const onSubmit = () => {
	emit('onSubmitSub', state.selectedRow);
};

// 分页改变
const onTablePageChange = (val: any) => {
	state.tableData.param.PageIndex = val.pageNum;
	state.tableData.param.PageSize = val.pageSize;
	getTableData();
};
</script>

<style scoped lang="scss">
:deep(.el-scrollbar__wrap) {
	max-height: calc(90vh - 240px) !important;
}
:deep(.el-radio__label) {
	display: none !important;
}
</style>